<template>
<div class="hotItemContainer" @click.prevent="onItemClicked">
    <img :src="item.Picture.BigUrl" alt="" class="hotItemImg">
    <div style="flex:1;display:flex;flex-direction:column;justify-content:center">
        <div class="hotItemTitle">{{ item.Name }}</div>
        <div class="hotItemShort">{{ item.Short||"" }}</div>
        <div class="hotItemPrice">{{item.Price.Price }}</div>
    </div>
</div>
</template>

<script>
export default {
    name: 'HotProductItem',
    props: ['item'],
    methods: {
        onItemClicked() {
            this.$emit('item-clicked', this.item)
        }
    }
}
</script>
<style scoped>
.hotItemContainer{
    display: flex;
    padding: 10px 0;
}

.hotItemImg{
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-left: 10px;
}
.hotItemTitle{
    font-size: 16px;
    color: #333;
    text-align: left;
}
.hotItemShort{
    font-size: 12px;
    color: #bbb;
    text-align: left;
}
.hotItemPrice{
    font-size: 16px;
    color: #f00;
    text-align: left;
}
</style>